<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<div class="search-box">
				<el-form ref="form" :model="searchForm" label-width="80px">
					<el-form-item label="退款状态" style="margin-bottom: 10px;">
						<el-button-group>
							<el-button :type="buttonType('status', 0)" @click="checkStatus(0)">全部</el-button>
							<el-button :type="buttonType('status', 1)" @click="checkStatus(1)">
								<el-badge :value="unCheck" class="item" type="danger" v-if="unCheck > 0">待审批
								</el-badge>
								<span v-else>待审批</span>
							</el-button>
							<el-button :type="buttonType('status', 2)" @click="checkStatus(2)">已通过</el-button>
							<el-button :type="buttonType('status', 3)" @click="checkStatus(3)">已拒绝</el-button>
							<el-button :type="buttonType('status', 4)" @click="checkStatus(4)">已取消</el-button>
						</el-button-group>
					</el-form-item>
				</el-form>
				<el-form :inline="true" :model="searchForm" class="demo-form-inline" label-width="80px">
					<el-form-item label="订单号">
						<el-input v-model="searchForm.order_no" placeholder="订单号" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="退款时间">
						<el-date-picker
							v-model="searchForm.create_time"
							type="daterange"
							value-format="YYYY-MM-DD"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
			<el-table
				:data="tableData"
				:row-style="{ height: '57px'}"
				style="width: 100%;font-size: 12px">
				<el-table-column
					label="订单号"
					width="200px">
					<template #default="scope">
						<p>
							{{ scope.row.refund_order_no }}
							<el-icon :size="16" @click="copyText(scope.row.refund_order_no)" style="cursor: pointer">
								<component :is="copyIcon"/>
							</el-icon>
						</p>
					</template>
				</el-table-column>
				<el-table-column
					label="退款商品"
					width="400px">
					<template #default="scope">
						<div v-for="item in scope.row.detail" :key="item.id">
							<div class="goods-info">
								<div class="goods-img">
									<img :src="item.logo" style="height: 36px;width: 36px">
								</div>
								<div class="goods-name">
									{{ item.goods_name }}
									<div v-if="item.rule != 0">
										{{ item.rule.split('※').join(' ') }}
									</div>
								</div>
							</div>
							<div class="goods-price">
								￥{{ item.price }} × {{ item.apply_refund_num }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					label="退款人">
					<template #default="scope">
						<p>{{ scope.row.user_name }}</p>
						<p>
							ID: {{ scope.row.user_id }}
							<el-icon :size="16" @click="copyText(scope.row.user_id)" style="cursor: pointer">
								<component :is="copyIcon"/>
							</el-icon>
						</p>
					</template>
				</el-table-column>
				<el-table-column
					prop="create_time"
					label="退款时间"
					width="160px">
				</el-table-column>
				<el-table-column
					prop="step_txt"
					label="退款进度">
				</el-table-column>
				<el-table-column
					prop="status_txt"
					label="退款状态">
				</el-table-column>
				<el-table-column
					prop="apply_refund_reason"
					width="120"
					label="退款原因">
				</el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					width="200px">
					<template #default="scope">
						<el-button @click="handleMore('detail', scope.row)" type="text" size="small">订单详情</el-button>
						<el-button @click="handleMore('agreeRefundMoney', scope.row)" type="text" size="small"
								   v-if="(scope.row.refund_type == 1 && scope.row.step == 2 && scope.row.status == 1) ||
                                                (scope.row.refund_type == 2 && scope.row.step == 4 && scope.row.status == 1)">同意退款</el-button>
						<el-button @click="handleMore('refuseRefundMoney', scope.row)" type="text" size="small"
								   v-if="(scope.row.refund_type == 1 && scope.row.step == 2 && scope.row.status == 1) ||
                                                (scope.row.refund_type == 2 && scope.row.step == 4 && scope.row.status == 1)">拒绝退款</el-button>
						<el-button @click="handleMore('agreeRefundGoods', scope.row)" type="text" size="small"
								   v-if="scope.row.refund_type == 2 && scope.row.step == 2 && scope.row.status == 1">同意退货</el-button>
						<el-button @click="handleMore('refuseRefundGoods', scope.row)" type="text" size="small"
								   v-if="scope.row.refund_type == 2 && scope.row.step == 2 && scope.row.status == 1">拒绝退货</el-button>
					</template>
				</el-table-column>
			</el-table>
			<Pages :form="searchForm" :page-obj="page" @pageChange="pageChangeHandle" @pageJump="getList"></Pages>

		</el-card>

		<el-dialog
			title="退款详情"
			v-model="orderVisible"
			width="1000px">
			<el-descriptions title="退款信息">
				<el-descriptions-item label="申请人">{{ orderDetail.refund.user_name }}</el-descriptions-item>
				<el-descriptions-item label="退款状态">
					<el-tag size="small">{{ orderDetail.refund.status_txt }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="退款方式">
					<el-tag size="small" v-if="orderDetail.refund.refund_type == 1">仅退款</el-tag>
					<el-tag size="small" v-else>退货退款</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="退款步骤">
					<el-tag size="small">{{ orderDetail.refund.step_txt }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="申请退款金额">
					<el-tag type="danger" size="small">{{ orderDetail.refund.refund_price }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="申请退款数量">{{ orderDetail.refund.refund_num }}</el-descriptions-item>
				<el-descriptions-item label="用户说明">{{ orderDetail.refund.remark }}</el-descriptions-item>
				<el-descriptions-item label="退款理由">{{ orderDetail.refund.apply_refund_reason }}</el-descriptions-item>
				<el-descriptions-item label="不退款理由">{{ orderDetail.refund.unrefund_reason }}</el-descriptions-item>
				<!--<el-descriptions-item label="退款电话">{{ orderDetail.refund.refund_phone }}</el-descriptions-item>-->
				<el-descriptions-item label="退货单号">{{ orderDetail.refund.refund_express }}</el-descriptions-item>
				<el-descriptions-item label="退货快递">{{ orderDetail.refund.refund_express_name }}</el-descriptions-item>
				<el-descriptions-item label="退款凭证">
					<el-image :src="item" style="width: 80px;height: 80px" v-for="(item, index) in orderDetail.refund.refund_img" :key="index" :preview-src-list="[item]"></el-image>
				</el-descriptions-item>
			</el-descriptions>
			<el-descriptions title="订单信息">
				<el-descriptions-item label="订单ID">{{ orderDetail.info.order_no }}</el-descriptions-item>
				<el-descriptions-item label="订单状态">
					<el-tag size="small">{{ orderDetail.status[orderDetail.info.status] }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="购买数量">{{ orderDetail.info.total_num }}</el-descriptions-item>
				<el-descriptions-item label="实际支付">{{ orderDetail.info.pay_price }}</el-descriptions-item>
				<el-descriptions-item label="支付邮费">{{ orderDetail.info.pay_postage }}</el-descriptions-item>
				<el-descriptions-item label="退款金额">
					<el-tag type="danger" size="small">-{{ orderDetail.info.refunded_price }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="会员优惠">-{{ orderDetail.info.vip_discount }}</el-descriptions-item>
				<el-descriptions-item label="优惠券金额">-{{ orderDetail.info.coupon_amount }}</el-descriptions-item>
				<el-descriptions-item label="下单时间">{{ orderDetail.info.create_time }}</el-descriptions-item>
				<el-descriptions-item label="支付时间">{{ orderDetail.info.pay_time }}</el-descriptions-item>
				<el-descriptions-item label="发货时间">{{ orderDetail.info.delivery_time }}</el-descriptions-item>
				<el-descriptions-item label="支付方式">{{ orderDetail.payWay[orderDetail.info.pay_way] }}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

		<el-dialog
			title="同意退款"
			v-model="refundMoneyVisible"
			width="600px">
			<el-form ref="form" :model="refundMoneyForm" label-width="80px">
				<el-form-item label="订单号">
					<el-input v-model="orderNo" disabled></el-input>
				</el-form-item>
				<el-form-item label="退款金额">
					<el-input v-model="refundMoneyForm.refund_price" type="number"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitAgreeRefundMoney">确定提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog
			title="拒绝退款"
			v-model="refuseMoneyVisible"
			width="600px">
			<el-form ref="form" :model="refuseRefundMoneyForm" label-width="100px">
				<el-form-item label="拒绝退款原因">
					<el-input v-model="refuseRefundMoneyForm.refund_reason" type="textarea" rows="3"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitRefuseRefundMoney">确定提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</el-main>
</template>

<script>
import Pages from "@/components/pages/index.vue";

export default {
	name: "refund",
	components: {Pages},
	data() {
		return {
			searchForm: {
				status: 0,
				order_no: '',
				create_time: '',
				page: 1,
				limit: 10
			},
			page: {
				total: 0
			},
			loading: false,
			tableData: [],
			orderVisible: false,
			refundMoneyVisible: false,
			refuseMoneyVisible: false,
			orderDetail: {
				imgJson: {},
				refund: {},
				info: {},
				status: {},
				payWay: {}
			},
			orderNo: '',
			refundMoneyForm: {
				id: 0,
				status: 1,
				refund_price: 0
			},
			refuseRefundMoneyForm: {
				id: 0,
				status: 2,
				refund_reason: ''
			},
			unCheck: 0,
			copyIcon: 'el-icon-CopyDocument'
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		// 获取列表
		async getList() {
			let res = await this.$API.refund.list.get(this.searchForm)
			this.tableData = res.data.data
			this.page.total = res.data.total
			this.unCheck = res.data.unCheck
		},
		// 选择订单
		checkStatus(status) {
			this.searchForm.status = status
			this.getList()
		},
		// 查询
		search() {
			this.getList()
		},
		pageChangeHandle(page) {
			this.searchForm.page = page
			this.getList()
		},
		// 更多的方法
		handleMore(event, row) {
			if (event == 'detail') {
				this.orderVisible = true
				this.getOrderDetail(row)
			} else if (event == 'agreeRefundMoney') {
				this.refundMoneyVisible = true
				this.orderNo = row.refund_order_no
				this.refundMoneyForm.id = row.id
				this.refundMoneyForm.refund_price = row.refund_price
			} else if (event == 'refuseRefundMoney') {
				this.refuseRefundMoneyForm.id = row.id
				this.refuseMoneyVisible = true
			} else if (event == 'agreeRefundGoods') {
				this.submitAgreeRefundGoods(row.id)
			} else if (event == 'refuseRefundGoods') {
				this.submitRefuseRefundGoods(row.id)
			}
		},
		// 获取退款详情
		async getOrderDetail(row) {
			let res = await this.$API.refund.detail.get({id: row.order_id, refund: row.id})
			this.orderDetail = res.data
		},
		// 同意退款
		async submitAgreeRefundMoney() {
			let res = await this.$API.refund.checkRefundMoney.post(this.refundMoneyForm)
			if (res.code == 0) {
				this.$message.success(res.msg)
				this.refundMoneyVisible = false
				this.getList()
			} else {
				this.$message.error(res.msg)
			}
		},
		// 拒绝退款
		async submitRefuseRefundMoney() {
			let res = await this.$API.refund.checkRefundMoney.post(this.refuseRefundMoneyForm)
			if (res.code == 0) {
				this.$message.success(res.msg)
				this.refuseMoneyVisible = false
				this.getList()
			} else {
				this.$message.error(res.msg)
			}
		},
		// 同意退货
		submitAgreeRefundGoods(id) {
			this.$confirm('确定同意退货?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				let res = await this.$API.refund.checkRefundGoods.post({id: id, status: 1})
				if (res.code == 0) {
					this.$message.success(res.msg)
					this.getList()
				} else {
					this.$message.error(res.msg)
				}
			}).catch(() => {
			});
		},
		// 拒绝退货
		submitRefuseRefundGoods(id) {
			this.$confirm('确定拒绝退货?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				let res = await this.$API.refund.checkRefundGoods.post({id: id, status: 2})
				if (res.code == 0) {
					this.$message.success(res.msg)
					this.getList()
				} else {
					this.$message.error(res.msg)
				}
			}).catch(() => {
			});
		},
		// 选择样式
		buttonType(field, type) {
			if (field == 'status') {
				if (this.searchForm.status == type) {
					return 'primary'
				}
			}
		},
		copyText(text) {
			navigator.clipboard.writeText(text).then(() => {
				this.$message.success('复制成功')
			}).catch(error => {
				console.log('错误', error)
				this.$message.error('复制错误')
			});
		}
	}
}
</script>

<style scoped>
.primary {
	color: #FFF;
	background-color: #409EFF;
	border-color: #409EFF;
}

.goods-info {
	width: 100%;
	display: flex;
}

.goods-info .goods-img {
	height: 36px;
	width: 36px;
	margin-top: 6px;
}

.goods-name {
	margin-left: 10px
}

.goods-price {
	color: #F56C6C;
	font-weight: 700;
	padding-left: 36px;
	margin-left: 10px
}

.el-dropdown-link {
	cursor: pointer;
	color: #409EFF;
}

.el-icon-arrow-down {
	font-size: 12px;
}
.el-button--small {
	padding: 0 !important;
}
</style>
